<div class="col-jy-{num}">
		<div class="ibox float-e-margins">
        	<div class="ibox-title">
                <h5>{{check_show_lang('{title}')}}</h5>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-chart-{ecid}" style="height: 310px;display: none;"></div>
				<div class="spiner-example" id="echarts-loading-{ecid}">
						<div class="sk-spinner sk-spinner-three-bounce">
							<div class="sk-bounce1"></div>
							<div class="sk-bounce2"></div>
							<div class="sk-bounce3"></div>
						</div>
                </div>
            </div>
        </div>
</div>
<script type="text/javascript">
setTimeout(function(){
		var _self = this;
	   var res = {datas};
	   if(res){
		   $("#echarts-loading-{ecid}").hide()
		   $("#echarts-chart-{ecid}").show();
			bar_chart_{ecid}(res);
	   }
} ,500); 

function bar_chart_{ecid}(res){
	require(['echarts'],function (echarts) {
		var myChart = echarts.init(document.getElementById("echarts-chart-{ecid}"));
		var legend=[];
		$.each(res.datas,function(k,v){
			legend.push(v.name);
		});
		var series=[];
		$.each(res.datas,function(k,v){
			series.push({
					name: v.name,
					type: "bar",
					data: v.value,
					markPoint: {
						data: [{
									type: "max",
									name: "最大值"
								}, {
									type: "min",
									name: "最小值"
								}]
							}
					});
		});
		var option = {
			title: {
				text: scope.check_show_lang('{title}')
			},
			tooltip: {
				trigger: "axis"
			},
			legend: {
				data: legend
			},
			grid: {
				x: 30,
				x2: 40,
				y2: 24
			},
			calculable: !0,
			xAxis: [{
				type: "category",
				data: res.xdatas
			}],
			yAxis: [{
				type: "value"
			}],
			series: series
		};
	myChart.setOption(option);
	});
}
</script>